<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>World Bank - Photo Diaries</title>
<link href="MasterStyle.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $('#submitLoc').hover(
            function(){ // Change the input image's source when we "roll on"
                $(this).attr({ src : 'images/LocationSearch_On.png'});
            },
            function(){ // Change the input image's source back to the default on "roll off"
                $(this).attr({ src : 'images/LocationSearch.png'});             }
        );
		$('#submitEmail').hover(
            function(){ // Change the input image's source when we "roll on"
                $(this).attr({ src : 'images/EmailSearch_On.png'});
            },
            function(){ // Change the input image's source back to the default on "roll off"
                $(this).attr({ src : 'images/EmailSearch.png'});             }
        );
		$('#DownloadApp').hover(
            function(){ // Change the input image's source when we "roll on"
                $(this).attr({ src : 'images/SubmitBtn_On.png'});
            },
            function(){ // Change the input image's source back to the default on "roll off"
                $(this).attr({ src : 'images/SubmitBtn.png'});             }
        );
		$('#AdminLogin').hover(
            function(){ // Change the input image's source when we "roll on"
                $(this).attr({ src : 'images/SubmitBtn_On.png'});
            },
            function(){ // Change the input image's source back to the default on "roll off"
                $(this).attr({ src : 'images/SubmitBtn.png'});             }
        );
		$('#Logout').hover(
            function(){ // Change the input image's source when we "roll on"
                $(this).attr({ src : 'images/Logout_On.png'});
            },
            function(){ // Change the input image's source back to the default on "roll off"
                $(this).attr({ src : 'images/Logout.png'});             }
        );
    });
</script>
<SCRIPT TYPE="text/javascript">
<!--
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;

if (keycode == 13)
   {
   myfield.form.submit();
   return false;
   }
else
   return true;
}
//-->
</SCRIPT>
<script>

/*
Clear default form value script- by JavaScriptKit.com
Featured on JavaScript Kit (http://javascriptkit.com)
Visit javascriptkit.com for 400+ free scripts!
*/

function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
} 
</script>
</head>

<body>
<div class="MainContainer">
	
  <img src="images/Logo.png" class="LogoImage" />
    
  <div class="SortForm">
        <form id="Location">
        <input name="" type="text" class="textInput" onKeyPress="return submitenter(this,event)" />
        <input type="image" name="submit" class="submit" id="submitLoc" src="images/LocationSearch.png">
        </form>
        
        <form id="Email">
        <input name="" type="text" class="textInput" onKeyPress="return submitenter(this,event)" />
        <input type="image" name="submit2" class="submit" id="submitEmail" src="images/EmailSearch.png">
        </form>
    </div>
    
  <div class="AdminTable">
  <a href="#"><img src="images/Edit.png" alt="Edit" width="46" height="24" border="0" style="vertical-align:middle" /></a>     
  		<a href="#"><img src="images/SelectAll.png" alt="Select_All" width="91" height="24" border="0" style="vertical-align:middle"/></a>
           
        <a href="#"><img src="images/Delete.png" alt="Delete" width="67" height="24" border="0" style="vertical-align:middle"/></a>
        Page <a href="#"><img src="images/Prev.png" alt="Prev" width="18" height="18" border="0" style="vertical-align:middle"/></a> 1 of 10 <a href="#"><img src="images/Next.png" alt="Next" width="18" height="18" border="0" style="vertical-align:middle"/></a>        
        <a href="#"><img src="images/AddNew.png" alt="Add New" width="76" height="24" border="0" style="float:right;" /></a>
   
   <div class="rowContainer">     
    
    <div class="photoInfo" id="photoInfoDisplay">
    	<input name="" type="checkbox" value="" style="vertical-align:top; float:left;" />
        <img src="images/tempImage.png" width="106" height="80" hspace="0" style="vertical-align:top; float:left; margin-left: 2px;	" />
        <div class="EmailInfo">SampleEmail@WorldBank.org<br />
			<span style="font-size:10px;">Device ID</span></div>
        <div class="MessageDisplay">User's Message</div>
      <div class="LocationInfo"> Brooklyn, New York<br /><br />
      <strong>Lat:</strong> 21.34<br />
 <strong>Long: </strong>34.56</div>
    </div>
    
        <div class="photoInfoEdit" id="photoInfoEdit">
    	<input name="" type="checkbox" value="" style="vertical-align:top; float:left; margin-top:8px;" />
        <img src="images/tempImage.png" width="106" height="80" hspace="0" style="vertical-align:top; float:left; margin-left: 2px; margin-top:8px;	" />
     

        <div class="EmailInfo"><input name="" type="text" class="textInput2" value="Enter your email" onfocus="clearText(this)" /><br /><br />
		  <span style="font-size:10px;"><input name="" type="text" class="textInput2" value="Enter your Device ID" onfocus="clearText(this)" /></span></div>
        <div class="MessageDisplay"> <textarea name="textarea" id="textarea" cols="22" rows="3" onfocus="clearText(this)">Enter your Message</textarea></div>
      <div class="LocationInfo"><input name="" type="text" class="textInput2" value="Enter your Location" onfocus="clearText(this)" /><br />
      <br />
<strong>Lat:</strong> 21.34 <br />
<strong>Long: </strong>34.56</div>
<span style="float:left; position:relative;margin-left:8px;">Change Image: </span>
<input name="" type="file"  style="float:left; position:relative; margin-left:-82px;margin-top:16px;" value="Enter your Location" onfocus="clearText(this)"/>
<input name="" type="button" style="float:left; position:relative; margin-left:254px;margin-top:18px;" value="Save" />
<input name="" type="button" style="float:left; position:relative; margin-left:8px;margin-top:18px;" value="Cancel" />
    </div>
    
     <div class="photoInfo"></div>
     <div class="photoInfo"></div>
     <div class="photoInfo"></div>
     <div class="photoInfo"></div>
     <div class="photoInfo"></div>
     <div class="photoInfo"></div>
     <div class="photoInfo"></div>
     <div class="photoInfo"></div>
     <div class="photoInfo"></div>
    
    </div>
  </div>  
 
  <div class="BottomLayer">
  <span class="formTitle">DOWNLOAD APP</span><br />
  		<form action="" method="get" id="Download">
            <input name="" type="text" class="textInput2" value="Enter your email" onfocus="clearText(this)" />
            <input type="image" name="submit3" class="submit" id="DownloadApp" src="images/SubmitBtn.png">
        </form>
   </div>
  
   <div class="AdminNav">
    	<a href="#"><img id="Logout" src="images/Logout.png" alt="Logout" width="70" height="24" border="0" /></a>
   </div>
</div>
  
  <span class="footer"><br />This is World Bank's mobile photo blogging project based on Blackberry. Please contact <a href="mailto:info@worldbank.org">info@worldbank.org</a> for more details.</span>
 
</body>
</html>
